<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的歌单</title>
</head>
<body>
<a href="/add">点击添加歌曲</a>
<table>
  <thead>
  <th>编号</th>
  <th>名称</th>
  <th>歌手</th>
  <th>302K?</th>
  <th>操作</th>
  </thead>
  <tbody id="tbody">

  </tbody>
</table>
<script type="text/template" id="template">
  {{each musicList as value i}}
    <tr>
      <td>{{value.id}}</td>
      <td>{{value.name}}</td>
      <td>{{value.singer}}</td>
      <td>
        {{if value.isHighRate}}
          <input type="radio" checked/>是
          <input type="radio"/>否
        {{else if()}}
          <input type="radio"/>是
          <input type="radio" checked/>否
        {{/if}}
      </td>
      <td>
        <a href="/edit/{{value.id}}">编辑</a>
        <a href="JavaScript:remove('/remove/{{value.id}}')">删除</a>
      </td>
    </tr>
  {{/each}}
</script>
<script src="/www/vender/jquery/dist/jquery.js"></script>
<script src="/www/vender/artTemplate/dist/template.js"></script>
<script>

</script>
<script>

  // 入口函数
  $(function () {
    loadMusic();
  });

  function loadMusic(){
    $.ajax({
      url:'/getJson',
      type:'get',
      success: function (data) {
        var jsonObj = JSON.parse(data);
        var htmlStr = template('template',{
          musicList:jsonObj.musicList
        });
        console.log(htmlStr);
        $('#tbody').html(htmlStr);
      }
    });
  }

  function remove(url) {
    if (!confirm('您确定要删除吗？')) {
      return;
    }

    $.ajax({
      url: url,
      type: 'GET',
      success: function (data) {
        {
          var jsonObj = JSON.parse(data);
          if (jsonObj.code == '1') {
            // 表示删除成功
            // 删除成功之后
            loadMusic();
          } else if (jsonObj.code == '0') {
            alert('删除失败');
            console.log(data.msg);
          }
        }
      }
    });
  }

</script>
</body>
</html>
